<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>Zapatec DHTML Calendar</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" type="text/css" media="all" href="../themes/winxp.css" title="winxp" >
		<link href="../doc/css/zpcal.css" rel="stylesheet" type="text/css">
		<link href="../doc/css/template.css" rel="stylesheet" type="text/css">
		<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">


		<!-- import the calendar script -->
		<script type="text/javascript" src="../src/utils.js"></script>
		<script type="text/javascript" src="../src/calendar.js"></script>

		<!-- import the language module -->
		<script type="text/javascript" src="../lang/calendar-en.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->

		<!-- import the calendar setup script -->
		<script type="text/javascript" src="../src/calendar-setup.js"></script>
	</head>
	<body>
		<table class='zpStandard' width='800'> 
			<tr>
				<td>
					<div class="topMenuHeader">
						<div class="logo">
							<a href='http://www.zapatec.com'><img src='../doc/images/logoNew.gif' alt='Zapatec logo' border='0'></a>
						</div>
						<div class="btn1">
							<a href="https://www.zapatec.com/zadmin/buy.jsp"><img src="../doc/images/buttonBuy.png" alt='My Account' border="0"></a>                                                                                                                                                                 </div>
						<div class="btn1">
							<a href="http://www.zapatec.com/website/main/pricing.jsp"><img src="../doc/images/buttonPricing.png" alt='My Account' border="0"></a>
						</div>
					</div>

				</div>

			<a href='example9.html' style='float:left; margin-left:2em; margin-top:.5em;'> <img border='0' src='previous.gif' alt='previous Javascript Calendar Example'></a>
			<a href='example92.html' style='float:right; margin-right:2em; margin-top:.5em;'><img border='0' src='next.gif' alt='previous Javascript Calendar Example'></a>
<div class='zpCalSubheader' style='text-align:center'> Saving different dates in cookies</div>
<div class='zpCalDemoText'>


	This example shows how you can setup the calendar to "remember" the dates the
	user chose.

	<ol>
		<li> Click on the button in the first calendar and choose a date.</li>
		<li> Click on the button in the second calendar and choose a different date. </li>
		<li> Click on the <strong> Previous </strong> button above and then on the previous page click
		on <strong> Next </strong> to come back here.
		<li> Notice that the dates are saved. You can specify how many days you want the dates to be remembered</li>
		<li> Reset clears both dates </li>
		<li> This is yet another way to make life a little easier for visitors to your web site. Often people come back several 
		times to a web site to look at reservations and having the dates saved saves them from having to type/click again</li>
	</ol>

</div>

	<form name="form1" action="#" method="POST" onReset='resetDates()'> 
		<table>
			<tr>
				<td class='zpCalSubheader'> 
					Check-in Date:
				</td>
				<td>
					<input type="text" name="date8a" id="departure_date" />
					<input type="reset" value=" ... " id='button8a'>
				</td>
			</tr>
			<tr>
				<td class='zpCalSubheader'> 
					Check-out Date:
				</td>
				<td>
					<input type="text" name="date8b" id="arrivalDate" />
					<input type="reset" value=" ... " id='button8b'>
				</td>
			</tr>
			<tr>
				<td>

					<input type="reset" name="Submit22" value="Reset" class="button" onFocus="if(this.blur)this.blur()"> 
				</td>
			</tr>
		</table>
	</form>
	<script type="text/javascript">
		<!--  to hide script contents from old browsers
		var startDate;
		var endDate;
		var ONEDAY = 3600 * 24;

		function resetDates() {
			startDate = endDate = null;
		}



		/*
		* This functions return true to disallow a date
		* and false to allow it.
		*/



		Zapatec.Calendar.setup({
			inputField     :    "departure_date",   // id of the input field
			button         :    "button8a",  // What will trigger the popup of the calendar
			ifFormat       :    "%b %d, %Y", // format of the input field: Mar 18, 2005
			showsTime      :     false,      //no time
			saveDate       :    2            // save for two days
		});

		Zapatec.Calendar.setup({
			inputField     :    "arrivalDate",
			button         :    "button8b",  // What will trigger the popup of the calendar
			ifFormat       :    "%b %d, %Y", // format of the input field: Mar 18, 2005
			showsTime      :     false,      // no time
			saveDate       :    1            // save for one day. You can use fractions here such as 1/2, 1/4, 1/24 ...
		});
		// end hiding contents from old browsers  -->
	</script>
	<noscript>
		This page uses a <a href='http://www.zapatec.com/website/main/products/prod1/'> Javascript Calendar </a>, but
		your browser does not support Javascript. 
		<br/>
		Either enable Javascript in your Browser or upgrade to
		a newer version.
	</noscript>

	<div class="footer" style='text-align:center; margin-top:2em'>
		<br/>
		&copy; 2004 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
	</div>
			</td>
		</tr>
	</table>

</body>
</html>
